<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <chart-card>
        <template #chart-title>
          今日销售额：
        </template>
        <template #chart-number>
          {{chartData.salesToday}}
        </template>
        <template #charts>
          <p style="padding:10px 0;margin:0px">
            <span>日同比：{{chartData.salesGrowthLastDay}}</span>
          </p>
          <p style="padding-bottom:10px 0;margin:0px">
            <span>月同比: {{chartData.salesGrowthLastMonth}}</span>
          </p>
        </template>
        <template #chart-footer>
          昨日销售额：{{chartData.salesLastDay}}
        </template>
      </chart-card>
    </el-col>
    <el-col :span="6">
      <chart-card>
        <template #chart-title>
          今日订单：
        </template>
        <template #chart-number>
          {{chartData.orderToday}}
        </template>
        <template #charts>
          <line-chart :data="chartData.orderTrend"></line-chart>
        </template>
        <template #chart-footer>
          昨日订单量：{{chartData.orderLastDay}}
        </template>
      </chart-card>
    </el-col>
    <el-col :span="6">
      <chart-card>
        <template #chart-title>
          今日交易用户数：
        </template>
        <template #chart-number>
          {{chartData.orderUser}}
        </template>
        <template #charts>
          <bar-chart :data="chartData.orderUserTrend"></bar-chart>
        </template>
        <template #chart-footer>
          退货率：{{chartData.returnRate}}
        </template>
      </chart-card>
    </el-col>
    <el-col :span="6">
      <chart-card>
        <template #chart-title>
          累计用户数：
        </template>
        <template #chart-number>
          {{chartData.usersTotal}}
        </template>
        <template #charts>
          <progress-chart></progress-chart>
        </template>
        <template #chart-footer>
          <p style="padding:0px 0;margin:0px">
            <span>日同比：{{chartData.salesGrowthLastDay}}</span>
          </p>
          <p style="padding:0px 0;margin:0px">
            <span>月同比: {{chartData.userGrowthLastMonth}}</span>
          </p>
        </template>

      </chart-card>
    </el-col>
  </el-row>
</template>
  
<script setup lang="ts">
//引入自己封装的卡片组件
import ChartCard from "./chartCard/index.vue";
//折线组件
import LineChart from './lineChart/index.vue'
//柱状图组件
import BarChart from './barChart/index.vue';
//进度条
import ProgressChart from './progressChart/index.vue';
//接受父组件传来的数据
defineProps(['chartData']);
</script>
  
<style scoped>

</style>